<template>
	<view class="">
		<view class="wrap">
			<view class="head">
				<view class="head-img">
					<image src="@/static/index/icon_face.png" mode=""></image>

				</view>
				<view class="head-des">{{upPage.names}}请确保本人操作</view>
				<view class="head-idCard">身份证号{{upPage.idCards}}</view>
			</view>
			<view class="img">

				<image src="@/static/index/icon_face_des.png" mode="heightFix"></image>
			</view>
			<view class="btn" @click="submit">
				立即认证
			</view>
			<view class="xy">
				<image class="ty-img" @click="tyBtn" v-if="tyBtnIndex==false" src="@/static/index/icon_nor_ty.png"
					mode="aspectFit"></image>
				<image v-else class="ty-img" @click="tyBtn" src="@/static/index/icon_select_ty.png" mode="aspectFit">
				</image>

				<text>我已阅读并同意</text>
				<text class="name" @click="xyBtn('https://www.baidu.com')">
					《人脸识别服务协议书》
				</text>
				<text>采集并使用人脸信息进行身份核验。</text>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad
	} from "@dcloudio/uni-app"
	const {
		proxy
	} = getCurrentInstance();
	let tyBtnIndex = ref(false);
	let upPage = ref({})
	onLoad((e) => {
		upPage.value = JSON.parse(decodeURIComponent(e.params));
		var reg = /(?<=.)./g;
		upPage.value.names = upPage.value.name.replace(reg, '*');
		upPage.value.idCards = upPage.value.idCard.replace(/(\w{3})\w*(\w{4})/, '$1********$2');
	})
	let xyBtn = (u) => {

		uni.navigateTo({
			url: '/pagesB/webview/webview?url=' + u
		})

	}
	let tyBtn = () => {
		tyBtnIndex.value = !tyBtnIndex.value
	};
	let submit = () => {
		if (tyBtnIndex.value == false) {
			proxy.$ts("请勾选《人脸识别服务书》")
			return;
		}
		xyBtn('https://www.baidu.com')
		// console.log(upPage.value,'可以提交的东西了，请求H5')
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 100rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background: $mian-color;
		border-radius: 100rpx;
	}

	.xy {
		margin-top: 20rpx;
		color: #A5A5A5;
		font-size: 24rpx;

		.name {
			color: $mian-color;
		}

		.ty-img {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}
	}




	.wrap {
		.img {
			width: 80%;
			height: 100rpx;
			margin: 200rpx auto auto auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.head {
			font-family: PingFang SC, PingFang SC;

			.head-idCard {

				font-weight: 400;
				font-size: 24rpx;
				color: #737373;
			}

			.head-des {
				margin: 20rpx 0;
				font-weight: 600;
				font-size: 32rpx;
				color: #1B1B1E;
			}

			.head-img {
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
				margin: auto auto 54rpx auto;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

			}

			padding-top:50rpx;

			text-align: center;
			width: 80%;
			margin: 0 auto;
		}

		width: 90%;
		margin: 0 auto;

	}
</style>